실무에서 Validation Check는 필수이다. 실제로 개발하면서 수없는 비지니스 로직이 따르는데, 거기엔 항상 ‘그’가 존재한다. 바로 ‘Validation’ 프론트 개발자라면 그냥 지나쳐선 절대로 안되는 필수로직이기 때문에 클린코드 부분에서 많은 생각을 할 수 밖에없다.
- Validation 함수는 정말로 그 정의에 맞게 활용
- return은 Data가 아니라 Boolean Type
위의 주제 3개가 오늘 작성할 주제들이다.
Validation 함수는 정말로 그 정의에 맞게 활용 🙏
getInputValidation(e) {
const { name, value, maxLength } = e.target
if (name === 'price') {
e.target.value = value
.replace(/[^0-9]/g, '')
.toString()
.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
this.params.paneltyAmt = +e.target.value.replace(/[^0-9]/g, '')
}
if (name === 'memo') {
this.textValue = value.length
}
if (value.length > maxLength) {
return e.target.value.slice(0, maxLength)
}
},대략적인 로직이 위와 같을때, getInputValidation 함수안에 Validation Check 로직이 3개나 있습니다. 3개밖에 없더라도 벌써부터 가독성이 떨어지고 각각의 로직이 다른사람이 봤을 때 어떤상황에서 사용되는 Validation인지 분석하기 힘들 수있습니다.
물론 위의 코드는 3개에서 그쳐서 금방 이해할 수 도 있겠지만 실제 10개이상만 되더라도 상당히 난해한 함수가 될 수 있습니다. ‘getInputValidation’라는 함수의 정의된 의미가 명확하지 않게 됩니다. 말 그대로 Input을 입력할때 Check하는 함수인데 안에는 가격, 메모, 문자길이제한 등등이 포함되있습나다. 그리고 이러한 로직은 많이 사용되므로 공통함수로 사용하는 것이 좋습니다.
getInputValidation(e) {
const { name, value, maxLength } = e.target
priceCheck(name)
memoCheck(name)
maxLengthCheck(maxLength)
}이렇게 각각 함수를 만들어서 사용한다면 보다 가독성이 좋고 함수를 여러번 재사용 할 수 있습니다. 그리고 getInputValidation 함수의 의미도 명확하게 보입니다. 사실 제일중요 한 부분은 Validation을 최종적으로 실행하는 함수는 각각의 함수들의 Validation Check만 해야합니다.
return은 Data가 아니라 Boolean Type
위의 코드에서 하나 더 문제점이 있습니다. 바로 return 즉, 반환되는 값이 Boolean Type이 아니라는 점입니다. 이는 로직상의 복잡성을 높여 유지보수 측면에서 어려움을 겪을 수 있습니다. 물론 본인이 작성한 코드는 의미를 수월하게 파악할 수 있지만 다른사람이 코드를 본다면 return 값들을 하나씩 찾아봐야 하기때문입니다. 그게 또 수십개라면 문제는 커지겠죠
하지만 return이 단순히 Boolean Type으로 되어있다면 true / false로 만 비교하기때문에 보다 더 쉽게 로직파악을 할 수있습니다. 본래 Validation은 Check 할 때 맞다 / 아니다 의 의미만 파악하면 됩니다.
const validation = () => {
return false;
};
const postItem = () => {
if (!validation()) return;
console.log('hi');
};
postItem();위의 코드는 어떤 아이템을 등록하기전에 Validation Check를 하는 로직입니다. validation의 반환이 false이므로 더이상 콘솔함수가 실행되지않습니다. 이런식으로 Boolean Type으로 작성하면 간단하게 로직구현이 가능합니다.
한 걸음 더 나아가기
let a = '';
let b = 'c';
a || b;
// 결과 : c본격적으로 코드를 설명하기전에 간단하게 알아가야하는 로직이 있습니다. 바로 OR입니다. OR는 a의 값이 false일때 b를 실행합니다. 이를 활용하여 효과적인 Validation을 작성 할 수 있습니다.
const check1 = () => {
console.log('check1')
return true
}
const check2 = () => {
console.log('check2')
return true
}
const check3 = () => {
console.log('check3')
return false
}
const check4 = () => {
console.log('check4')
return true
}
const validation = () => {
return !(!check1() || !check2() || !check3() || !check4())
}
const postItem = () => {
if(!validation()) return
console.log('hi')
}
postItem()
결과 )
'check1'
'check2'
'check3'위의 코드를 보면 제가 위의 주제들을 모두 만족하는 코드임을 알 수 있습니다.
최종적으로 Validation을 Check하는 함수 validation은 함수의 validation만 체크하고 있으며, 각각의 check함수들은 return 값으로 Boolean Type을 주고있습니다. 그렇기 때문에 보다 더 가독성이 좋고 간결해짐을 알 수 있습니다.
check1의 return 값이 true이므로 false가되어 check2가 실행되고 그런방식으로 check3 함수까지 실행되다가 true가되어 더이상 check4는 실행되지않습니다.
즉 실질적으로 check하다가 오류가난 함수가 있으면 그 다음은 자동적으로 실행하지 않게 되는겁니다. 그리고 최종적으로 postItem에서 validation함수의 리턴값이 false이면 return이 되어 더이상 등록을 실행하지 않도록 막아주고 있습니다.
실제로 이러한 방식으로 현업에서 개발하여 도움이 많이되었습니다.